Butterfly主题魔改教程,GitHub Actions 自动部署博客。


我的博客主题版本为:hexo5.4、Butterfly3.6.2

如果与我的版本不一样可能会有略微差别,届时请自行百度。

本文参考文章:Akilarの糖果屋的《使用 Github Action 实现全自动部署》

1.说明

每次部署 Hexo 都需要运行指令三件套,随着文章越来越多,编译的时间也随之越来越长,通过 Github Action,我们只需要在每次完成博客的编写或修改以后,将改动直接 push 到远程仓库,之后的编译部署的工作统统交给 CI 来完成即可。

  • 什么是Github Action呢?

Github Action 是 GitHub 于 2018 年 10 月推出的一个 CI\CD 服务。

  • 什么是CI/CD 解释呢?

CI\CD 其实说的是三件事情:「持续集成(Continuous Integration)」、「持续交付(Continuous Delivery)」、「持续部署(Continuous Deployment)」。
因为「持续交付」和「持续部署」的英文缩写是一样的,所以这三件事情缩写成了 CI\CD

2.步骤

2.1获取 Token

为了确保交由 Github Action 来持续部署时,Github Action 具备足够的权限来进行 hexo deploy 操作,需要先获取 Token

  1. 访问 Github-> 头像(右上角)->Settings->Developer Settings->Personal access tokens->generate new token, 创建的 Token 名称随意,但必须勾选 repo 项。
  2. token 只会显示这一次,之后将无法查看,所以务必保证你已经记录下了 Token。之后如果忘记了就只能重新生成重新配置了。

2.2创建存放源码的私有仓库

  1. 我们需要创建一个用来存放 Hexo 博客源码的私有仓库 [SourceRepo]
  2. 创建完成后,需要把博客的源码 push 到这里。首先获取远程仓库地址,此处虽然 SSHHTTPS 均可。SSH 在绑定过 ssh key 的设备上无需再输入密码,HTTPS 则需要输入密码,但是 SSH 偶尔会遇到端口占用的情况。请自主选择。

这里之所以是私有仓库,是因为在接下来的配置中会用到 Token,如果 Token 被盗用,别人可以肆意操作你的 github 仓库内容,为了避免这一风险,才选择的博客源码闭源。

2.3配置 deploy 项

  1. 打开站点配置文件 [Blogroot]/_config.yml, 找到 deploy 配置项,使用之前生成的 [SiteToken] 和各个站点仓库 URL 来组装地址。

    deploy:
    - type: git
    repo:
    gitHub: https://[GithubUsername]:[GithubToken]@github.com/[GithubUsername]/[GithubBlogRepo].git[,branch]
    gitee: https://[GiteeUsername]:[GiteeToken]@gitee.com/[GiteeUsername]/[GiteeBlogRepo].git[,branch]
    coding: https://[TokenUser]:[CodingToken]@e.coding.net/[CodingUsername]/[CodingBlogRepo].git[,branch]
    # [,branch]为可选项,表示部署的分支
    #2020年10月后github新建仓库默认分支改为main,注意更改

2.4配置 Github Action

[Blogroot] 新建.github 文件夹,注意开头是有个. 的。然后在.github 内新建 workflows 文件夹,再在 workflows 文件夹内新建 autodeploy.yml, 在 [Blogroot]/.github/workflows/autodeploy.yml 里面输入

# 当有改动推送到master分支时,启动Action
name: 自动部署

on:
push:
branches:
- master #2020年10月后github新建仓库默认分支改为main,注意更改

release:
types:
- published

jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: 检查分支
uses: actions/checkout@v2
with:
ref: master #2020年10月后github新建仓库默认分支改为main,注意更改

- name: 安装 Node
uses: actions/setup-node@v1
with:
node-version: "12.x"

- name: 安装 Hexo
run: |
export TZ='Asia/Shanghai'
npm install hexo-cli -g

- name: 缓存 Hexo
uses: actions/cache@v1
id: cache
with:
path: node_modules
key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

- name: 安装依赖
if: steps.cache.outputs.cache-hit != 'true'
run: |
npm install --save

- name: 生成静态文件
run: |
hexo clean
hexo generate

- name: 部署
run: |
git config --global user.name "[GithubUsername]"
git config --global user.email "[GithubEmail]"
git clone https://github.com/[GithubUsername]/[GithubBlogRepo].git .deploy_git
# 此处务必用HTTPS链接。SSH链接可能有权限报错的隐患
# =====注意.deploy_git前面有个空格=====
# 这行指令的目的是clone博客静态文件仓库,防止Hexo推送时覆盖整个静态文件仓库,而是只推送有更改的文件
hexo deploy

2.5重新设置远程仓库和分支

  1. 删除或者先把 [Blogroot]/themes/butterfly/.git 移动到非博客文件夹目录下,原因是主题文件夹下的.git 文件夹的存在会导致其被识别成子项目,从而无法被上传到源码仓库。

  2. 在博客根目录 [Blogroot] 路径下运行指令

    git init #初始化
    git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git #[SourceRepo]为存放源码的github私有仓库
    git checkout -b master # 切换到master分支,
    #2020年10月后github新建仓库默认分支改为main,注意更改
    # 如果不是,后面的所有设置的分支记得保持一致
  3. 添加屏蔽项
    因为能够使用指令进行安装的内容不包括在需要提交的源码内,所有我们需要将这些内容添加到屏蔽项,表示不上传到 github 上。这样可以显著减少需要提交的文件量和加快提交速度。
    打开 [Blogroot]/.gitignore, 输入以下内容:

    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/
    .deploy_git*/
    .idea
    themes/butterfly/.git
  4. 之后再运行 git 提交指令,将博客源码提交到 github 上。

    git add .
    git commit -m "github action update"
    git push origin master
    #2020年10月后github新建仓库默认分支改为main,注意更改
  5. 此时你的主题文件夹若已经被正常上传,并且你也添加了主题文件夹下的.git 文件夹的屏蔽项。那你可以考虑把第二步移走或删除的.git 放回来,用作以后升级。(不禁怀疑真的有人会去用这个方式来升级吗)

2.6查看部署情况

  1. 此时,打开 GIthub 存放源码的私有仓库,找到 Action
  2. 根据刚刚的 Commit 记录找到相应的任务。
  3. 点击 Deploy 查看部署情况。
  4. 若全部打钩,恭喜你,你现在可以享受自动部署的快感了。

如有错误,欢迎评论区留言!